<!-- Start of the content -->
			<div role="main" class="container_12" id="content-wrapper">
				
				<!-- Start of the main content -->
				<div id="main_content">
				
					<h2 class="grid_12">Forms</h2>
					<div class="clean"></div>
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="<?php  echo THEME_PATH.$userCurrentTheme; ?>img/icons/packs/fugue/16x16/ui-text-field-format.png" alt="" width="16"
								height="16">
								<h3>Form</h3>
								<span></span>
							</div>
							<form class="validate" novalidate action="" method="get">
								<div class="content">
									<div class="_50">
										<p>
											<input name="username" type="text" placeholder=" Your Name" class="required" />
										</p>
									</div>
									<div class="_50">
										<p>
											<input name="email" type="email" placeholder=" Your E-Mail" class="required" />
										</p>
									</div>
									<div class="_100">
										<p>
											<label>
												Where are you from?
											</label>
											<select name="from" class="required">
												<option></option>
												<option>Europe</option>
												<option>America</option>
												<option>Asia</option>
												<option>Africa</option>
											</select>
										</p>
									</div>
									<div class="_50">
										<p>
											<label for="newsletter">
												<input name="newsletter" type="checkbox" class="required" />
												Recieve newsletter?
											</label>
										</p>
									</div>
									<div class="_50">
										<p>
											<span class="label">Newsletter type:</span>
											<label>
												<input name="htmltext" type="radio" class="required"/>
												Email
											</label>
											<label>
												<input name="htmltext" type="radio" class="required"/>
												HTML
											</label>
										</p>
									</div>
									<div class="_50">
										<p>
											<label for="file">
												Custom file
											</label>
											<input name="file" type="file" class="required" />
										</p>
									</div>									
								</div>
								<div class="actions">
									<div class="actions-left">
										<input type="reset" />
									</div>
									<div class="actions-right">
										<input type="submit" />
									</div>
								</div>
							</form>
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="<?php  echo THEME_PATH.$userCurrentTheme; ?>img/icons/packs/fugue/16x16/application-form.png" alt="" width="16"
								height="16">
								<h3>Form with Alternative Style</h3>
								<span></span>
							</div>
							<form class="validate">
								<div class="content no-padding">
									<div class="section _100">
										<label>
											Text field
										</label>
										<div>
											<input class="required" name="text">
										</div>
									</div>
									<div class="section _100">
										<span class="label">Newsletter type</span>
										<div>
											<div class="input">
												<label>
													<input name="htmltext" type="radio"/>
													Email
												</label>
												<label>
													<input name="htmltext" type="radio"/>
													HTML
												</label>
											</div>
										</div>
									</div>
									<div class="section _100">
										<label for="date">
											Date Picker
										</label>
										<div>
											<input id="date" type="date" class="required" data-date-relative="now">
										</div>
									</div>
									<div class="section _100">
										<label for="datetime">
											Date and Time Picker
										</label>
										<div>
											<input id="datetime" type="datetime" class="required" data-date-relative="now">
										</div>
									</div>
									<div class="section _100">
										<label for="time">
											Time Picker
										</label>
										<div>
											<input id="time" type="time" class="required" data-date-relative="now">
										</div>
									</div>
									<div class="section _100">
										<label for="timeampm">
											Time Picker (am/pm)
										</label>
										<div>
											<input id="timeampm" type="time" class="required" data-date-relative="now" data-timeformat="12">
										</div>
									</div>
									<div class="section _100">
										<label>
											Color selection
										</label>
										<div>
											<input name="color" type="color">
										</div>
									</div>
								</div>
								<div class="actions">
									<div class="actions-left">
										<input type="reset" />
									</div>
									<div class="actions-right">
										<input type="submit" />
									</div>
								</div>
							</form>
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					<div class="clear"></div>
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="<?php  echo THEME_PATH.$userCurrentTheme; ?>img/icons/packs/fugue/16x16/task-select-first.png" alt="" width="16"
								height="16">
								<h3>Form with Fieldsets</h3>
								<span></span>
							</div>
							<form method="get" action="" class="validate">
								<div class="content">
									<fieldset>
										<legend>
											Fieldset #1
										</legend>
										<div class="_50">
											<p>
												<label for="textfield1">
													Textfield #1
												</label>
												<input type="text" value="" class="required" name="textfield1" class="text">
											</p>
										</div>
										<div class="_50">
											<p>
												<label for="textfield2">
													Textfield #2
												</label>
												<input type="text" value="" name="textfield2" class="text">
											</p>
										</div>
										<div class="_100">
											<p>
												<label for="textfield2">
													Textfield #3
												</label>
												<input type="text" value="" class="required" name="textfield2" class="text">
											</p>
										</div>
									</fieldset>
									<fieldset>
										<legend>
											Fieldset #2
										</legend>
										<p class="inline-small-label">
											<label for="field4">
												Textfield #4
											</label>
											<input type="text" name="field4" class="text">
										</p>
										<p class="inline-small-label">
											<label for="field5">
												Textfield #5
											</label>
											<input type="text" name="field5" class="text">
										</p>
									</fieldset>
								</div>
								<div class="actions">
									<div class="actions-left">
										<input type="reset">
									</div>
									<div class="actions-right">
										<input type="submit">
									</div>
								</div>
							</form>
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="<?php  echo THEME_PATH.$userCurrentTheme; ?>img/icons/packs/fugue/16x16/grid.png" alt="" width="16"
								height="16">
								<h3>Grid</h3>
								<span></span>
							</div>
							<div class="content">
								<form method="post" action="" class="form" id="form">
									<div class="_100">
										<p>
											<label for="100">
												100%
											</label>
											<input type="text" value="" id="100" class="text">
										</p>
									</div>
									<div class="_50">
										<p>
											<label for="50">
												50%
											</label>
											<input type="text" value="" id="50" class="text">
										</p>
									</div>
									<div class="_50">
										<p>
											<label for="50">
												50%
											</label>
											<input type="text" value="" id="50" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_75">
										<p>
											<label for="75">
												75%
											</label>
											<input type="text" value="" id="75" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
									<div class="_25">
										<p>
											<label for="25">
												25%
											</label>
											<input type="text" value="" id="25" class="text">
										</p>
									</div>
								</form>
							</div> <!-- End of .content -->
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					<div class="clear"></div>
					
					<div class="grid_6">
						<div class="box">
							<div class="header">
								<img src="<?php  echo THEME_PATH.$userCurrentTheme; ?>img/icons/packs/fugue/16x16/layer-shape-line.png" alt="" width="16"
								height="16">
								<h3>Inline Form</h3>
								<span></span>
							</div>
							<div class="content">
								<p class="inline-label">
									<label for="field1">
										Inline Label
									</label>
									<input type="text" name="field1">
								</p>
								<p class="inline-medium-label">
									<label for="field2">
										Medium Label
									</label>
									<input type="text" name="field2">
								</p>
								<p class="inline-small-label">
									<label for="field3">
										Small Label
									</label>
									<input type="text" name="field3">
								</p>
								<p class="inline-mini-label">
									<label for="field4">
										Mini Label
									</label>
									<input type="text" name="field4">
								</p>
							</div> <!-- End of .content -->
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_6 -->
					
				</div> <!-- End of #main_content -->
				<div class="clear"></div>
					
			</div> <!-- End of #content-wrapper -->
			<div class="clear push"></div>
				
		</div> <!-- End of #height-wrapper -->